<!DOCTYPE html>
<html lang="en">
	<head>
		<title>角色管理</title>
		<#include "../../inc/header.ftl"/>
	</head>

	<body class="no-skin">

		<div class="main-container ace-save-state" id="main-container">

			<div class="main-content">
				<div class="main-content-inner">

					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<table id="MainGrid"></table>
								<div id="toolbar">
									<div style="padding:8px">
										角色名称：<input id="roleName" class="easyui-textbox" style="width:140px">&emsp;
										<a href="#" onclick="javascript:searchInfo()" class="easyui-linkbutton" iconCls="icon-search">查 询</a>
									</div>
									<div style="padding:8px 8px 4px">
										<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="javascript:addInfo()">增加</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="javascript:editInfo()">修改</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="javascript:delInfo()">删除</a>
									</div>
								</div>
							</div>
						</div><!-- /.row -->
					</div><!-- /.page-content -->

					<div id="box-add" class="ui-dialog-content hide">
						<form class="form-horizontal" id="form-add" method="post">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">角色编号</label>

								<div class="col-xs-12 col-sm-4">
									<span class="block input-icon input-icon-right">
										<input type="text" name="roleId" id="roleId" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</span>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">角色名称</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="roleName" id="roleName" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right">可用菜单</label>

								<div class="col-xs-12 col-sm-10">
									<input type="hidden" id="menuId" name="menuId">
									<div class="clearfix" style="overflow: auto;height: 248px;border: 1px solid #D4D4D4;">
										<ul type="text" id="menuTree" class="col-xs-12" style="width:100%" />
									</div>
								</div>
							</div>
						</form>
					</div><!-- #dialog-confirm -->
				</div>
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<!-- basic scripts -->
		<#include "../../inc/basicjs.ftl"/>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">

			jQuery(function($) {

				// 右侧表格
				$('#MainGrid').datagrid({
					url: prefix + '/sys/role/listRole',
					pagination: true,
					fitColumns:false,
					striped: true,
					singleSelect: true,
					loadMsg: "正在加载数据，请稍后...",
					queryParams: {roleName: ''},
					columns:[[
						{title:'角色编号',field:'roleId',width:100},
						{title:'角色名称',field:'roleName',width:200},
						{title:'可用菜单',field:'menuId', width:600, formatter: wordWarp}
					]],
					toolbar: '#toolbar'
				});

				$(window).resize(function() {
					$('#MainGrid').datagrid('resize');
				});

				$('#menuTree').tree({
					url: prefix + '/sys/menu/listMenu',
					loadFilter: function(data) {
						return getMenuTree(data.rows, '0');
					},
					checkbox: true,
					cascadeCheck: false
				});
			});

			function saveInfo(opt) {
				var url = (opt == 1) ? '/sys/role/addRole' : '/sys/role/saveRole';
				$('#form-add').form({
					url: prefix + url,
					onSubmit:function(){
						getChecked();
						var isValid = $(this).form('validate');
						if (isValid){
							$.messager.progress({
								title: '提示',
								msg: '数据处理中，请稍候……',
								text: ''
							});
						}
						return isValid;
					},
					success:function(data) {
						$.messager.progress('close');
						var data = eval('(' + data + ')');
						if (data.success) {
							searchInfo();
							$('#box-add').dialog('close');
						} else {
							$.messager.alert('提示', data.msg, 'info');
						}
					}
				});
				$('#form-add').submit();
			}
			function searchInfo() {
				$('#MainGrid').datagrid('load',{
					roleName: $('#roleName').val()
				});
			}
			function addInfo() {
				$('#form-add').form('clear');
				showForm(1);
			}
			function editInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要编辑的数据', 'info');
					return;
				}
				$.ajax({
					url: prefix + '/sys/role/getRole',
					type: 'POST',
					data: {roleId: row.roleId},
					dataType: 'json',
					success:function(data){
						if(data.success) {
							$('#form-add').form('load',data.data);
							showForm(2);
						}else {
							$.messager.alert('提示', data.msg, 'info');
						}
					}
				});
			}
			function showForm(opt) {
				treeChecked();
				$("#roleId").textbox('readonly', (opt == 2));
				var tit = (opt == 1) ? '添加角色' : '编辑角色';
				$( "#box-add" ).removeClass('hide').dialog({
					title: '&nbsp;' + tit,
					iconCls:'icon-add',
					width: 600,
					height: 400,
					modal: true,
					buttons:[{
						text:'保存',
						iconCls:'icon-ok',
						width:80,
						plain:false,
						handler:function(){
							saveInfo(opt);
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						width:80,
						plain:false,
						handler:function(){$('#box-add').dialog('close')}
					}]
				});
			}
			function delInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要删除的数据', 'info');
					return;
				}
				$.messager.confirm('提示', '确定要删除角色[' + row.roleId + ']吗？', function(r){
					if (!r) {
						$.ajax({
							url: prefix + '/sys/role/deleteRole',
							type: 'POST',
							data: {roleId: row.roleId},
							dataType: 'json',
							success:function(data){
								if(data.success) {
									searchInfo();
								}else {
									$.messager.alert('提示', data.msg, 'info');
								}
							}
						});
					}
				});
			}
			function getMenuTree(data, parentId) {
				var chd = [];
				for (var i=0;i<data.length;i++) {
					if (data[i]['parentId'] == parentId) {
						var sub = getMenuTree(data, data[i]['menuId']);
						var node = {id: data[i]['menuId'], text: data[i]['menuName']};
						if (sub.length > 0) node['children'] = sub;
						chd.push(node);
					}
				}
				return chd;
			}
			function getChecked() {
				var nodes = $('#menuTree').tree('getChecked');
				var s = '';
				for (var i=0;i<nodes.length;i++) {
					var p = $('#menuTree').tree('getParent', nodes[i].target);
					while(p) {
						if (!p.checked) {
							$('#menuTree').tree('check', p.target);
							s = s + ',' + p.id;
						}
						p = $('#menuTree').tree('getParent', p.target);
					}
					s = s + ',' + nodes[i].id;
				}
				$("#menuId").val(s);
			}
			function treeChecked() {
				var _tree = $('#menuTree');
				var ids = ',' + $("#menuId").val() + ',';
				var roots = _tree.tree('getRoots');//返回tree的所有根节点数组
				traverseTree(_tree, roots, ids);
			}
			function traverseTree(_tree,parent,ids){
				if (typeof(parent) == 'undefined'){
					return;
				}
				for ( var i = 0; i < parent.length; i++) {
					var node = parent[i];
					if (ids.indexOf(',' + node.id + ',') >= 0) {
						_tree.tree('check', node.target);//将得到的节点选中
					} else {
						_tree.tree('uncheck', node.target);//将得到的节点选中
					}
					var children = _tree.tree('getChildren', node.target);
					if (children) {
						traverseTree(_tree, children, ids);
					}
				}
			}
		</script>
	</body>
</html>
